<template>
  <li class="review-item">
    <div class="acc">
      <img src="@/assets/image/user.png" alt="" />
      <span>admin</span>
    </div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit
      voluptatum ullam dolor numquam quia soluta corporis nostrum molestiae?
      Ullam soluta provident vitae? Voluptatem laboriosam dignissimos sequi
      commodi quam ipsa atque?
    </p>
  </li>
</template>

<style lang="scss">
.review-item {
  width: 200rem;
  flex-shrink: 0;
  height: 104rem;
  border-radius: 4rem;
  border: solid 2rem var(--border-color);
  margin-right: 10rem;
  padding: 10rem 8rem;
  box-sizing: border-box;

  >.acc {
    @include flex($ai: center);
    font-size: 16rem;

    img {
      margin-right: 4rem;
      height: 18rem;
      width: 18rem;
      object-fit: cover;
      border-radius: 50%;
    }
  }

  p {
    font-size: 12rem;
    margin: 8rem 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    font-weight: 100;
    line-height: 14rem;

  }
}
</style>
